<template>
    <ElTable class="list-table is-border" height="720" :span-method="spanMethod" :="$attrs" border :data="list">
        <ElTableColumn label="客户名称" prop="khmc" align="center"></ElTableColumn>
        <ElTableColumn label="店铺平台" prop="dpptName" align="center"></ElTableColumn>
        <ElTableColumn label="店铺名称" prop="dpmc" align="center"></ElTableColumn>
        <ElTableColumn label="业务名称" prop="ywmc" align="center"></ElTableColumn>
        <ElTableColumn label="业务首次合作时间" prop="ywschzsj" align="center">
            <template #default="{ row }">
                {{ row.ywschzsj ? row.ywschzsj.split(' ')[0] : '' }}
            </template>
        </ElTableColumn>
        <ElTableColumn label="子账号名称" prop="zzhmc" align="center"></ElTableColumn>
        <ElTableColumn label="子账号密码" prop="zzhmm" align="center"></ElTableColumn>
        <ElTableColumn label="录入方式" prop="lrfsVal" align="center"></ElTableColumn>
        <ElTableColumn label="数据账号" prop="sjzh" align="center"></ElTableColumn>
        <ElTableColumn prop="_action" label="操作子账号" fixed="right" :min-width="90" header-align="center" align="center">
            <template #default="{ row }">
                <ElButton type="primary" link @click="$emit('openEditZzh', row)">编辑</ElButton>
                <ElButton v-if="row.zzhStatus === 1" type="primary" link @click="openZzhStop(row)">停用</ElButton>
                <ElButton v-if="row.zzhStatus === 0" type="primary" link @click="openZzhEnable(row)">启用</ElButton>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="_action1" label="业务纬度" fixed="right" :min-width="90" header-align="center" align="center">
            <template #default="{ row }">
                <ElButton type="primary" link @click="$emit('openAddZzh', row)">添加子账号</ElButton>
            </template>
        </ElTableColumn>
    </ElTable>
</template>

<script setup lang="ts">
import { ElTableColumn, ElMessageBox } from 'element-plus';
import { computed } from 'vue'
import { addRowAndColSpan } from '@/utils/zeo'
import { zzhStopDialog } from '../dialog/zzhGl.ts'
import { postZzhEnable } from '../api';


interface Props {
    data?: any[],
}

const emit = defineEmits(['refreshData', 'openEditZzh', 'openAddZzh']); // 添加 refreshData 事件

const props = withDefaults(defineProps<Props>(), {
    data: () => []
})

const list = computed(() => {
    let l = props.data;
    l = addRowAndColSpan(l, 'customerId', 'rowspan1', 'colspan1');
    l = addRowAndColSpan(l, 'customerShopId', 'rowspan2', 'colspan2');
    l = addRowAndColSpan(l, 'customerShopBusinessId', 'rowspan3', 'colspan3');
    return l;
})

const level1 = [
    'khmc'
]

const level2 = [
    'dpmc', 'dpptName'
]

const level3 = [
    'ywmc', '_action1'
]

const spanMethod = ({ row, column }) => {
    if (level1.includes(column.property)) {
        return {
            rowspan: row.rowspan1,
            colspan: row.colspan1
        }
    } else if (level2.includes(column.property)) {
        return {
            rowspan: row.rowspan2,
            colspan: row.colspan2
        }
    } else if (level3.includes(column.property)) {
        return {
            rowspan: row.rowspan3,
            colspan: row.colspan3
        }
    }
}

const openZzhStop = async (row) => {
    await ElMessageBox.confirm('确定停用该子账号吗？', '提示')
    await zzhStopDialog.title('停用子账号').open({ row });
    emit('refreshData');

}

const openZzhEnable = async (row) => {
    await ElMessageBox.confirm('确定启用该子账号吗？', '提示')
    await postZzhEnable(row);
    emit('refreshData');
}

</script>